<template>
	<view>
		<w-compress ref='wCompress' />
		<!-- <u-upload accept="image" id="upload" style="margin-left: 40rpx;" :previewFullImage="true" :headers="headers"
			:fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6">
		</u-upload> -->
		<u-upload :fileList="fileList1" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic" name="1"
			multiple :maxCount="limit" :disabled="disable" :deletable="showdel" :compress="true">
		</u-upload>
	</view>
</template>

<script>
	export default {
		props: {
			imgk: {
				type: Number,
				default: 0
			},
			limit: {
				default: 1,
				type: Number
			},
			imageArr: {
				type: Array,
				default: []
			},
			showdel: { //删除按钮
				type: Boolean,
				default: true
			},
			disable: { //显示功能
				type: Boolean,
				default: false
			},
			id: {
				type: Array,
			}
		},
		data() {
			return {
				upDown: false, //判断图片是修改
				fileList1: [], //存放图片的列表
				ImageId: [], //存放所有图片的id
				fileMaxSize: 1 * 1024 * 1024, // 默认最大为1M
				fileMinSize: 50 * 1024 // 最小为50KB
			}
		},
		created() {
			this.fileList1 = this.imageArr
			console.log(this.imageArr)
		},
		watch: {
			// fileList1(n, o) {
			// 	let images = n.map(i => i.url)
			// 	let obj={
			// 		imgk:this.imgk,images
			// 	}
			// 	this.$emit('upImgs', obj)
			// },
			id: {
				handler: function(newVal, oldVal) {
					// console.log(newVal,oldVal,'id值')
				},
				immediate: true,
				deep: true //对象内部的属性监听，也叫深度监听
			},
			imageArr(n, o) {
				console.log(n, '图片')
				if (n.length != 0) {
					this.fileList1 = n
				}
			},
			upDown(val, val2) {
				// console.log(val,val2)
				// console.log(this.fileList1)
				let images = this.fileList1.map(i => i.url)
				// console.log(this.id, 121212)
				let obj = {
					imgk: this.imgk,
					images,
					id: this.id
				}
				// console.log(obj)
				this.$emit('upImgs', obj)
			}

		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.upDown = !this.upDown
			},
			empt() {
				// console.log(111)
				this.fileList1 = []
			},
			getCompressionRatio(fileSize) {
				const multiple = (fileSize / this.fileMaxSize).toFixed(2) // 获取文件大小倍数，生成质量比
				let compressionRatio = 1
				if (multiple > 5) {
					compressionRatio = 0.2
				} else if (multiple > 4) {
					compressionRatio = 0.3
				} else if (multiple > 3) {
					compressionRatio = 0.4
				} else if (multiple > 2) {
					compressionRatio = 0.5
				} else if (multiple > 1) {
					compressionRatio = 0.6
				} else {
					compressionRatio = 1
				}
				return compressionRatio;
			},
			//压缩图片
			async compress(files) { //图片压缩并上传
				// console.log(files)
				const fileSize = files.size
				const that = this
				let compressFile = []
				let compressionRatio = 1
				if (fileSize > this.fileMaxSize) {
					compressionRatio = this.getCompressionRatio(fileSize)
				}
				//循环压缩并上传
				return new Promise((resolve, reject) => {
					that.$refs.wCompress.start(files.url, { //调用压缩组件方法
							// pixels: 630000,  // 最大分辨率，默认二百万
							quality: compressionRatio || 0.8, // 压缩质量，默认0.8     
							base64: false, // 是否返回base64，默认false，非H5有效
						})
						.then(async res => {
							let getUrl =await this.uploadFilePromise(res.url) //调用上传方法
							resolve(getUrl)
							console.log(getUrl,666)
						})
						.catch(e => {
							console.log(e)
						})
				})

			},


			// 新增图片
			async afterRead(event) {
				// console.log(event)
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					// await this.compress(lists[i].url);
					const result = await this.compress(lists[i]);
					console.log(result,111)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.upDown = !this.upDown
			},
			//每新增一张图片，向后台获取一个id值
			uploadFilePromise(url) {
				// console.log(url, 'url')
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${getApp().globalData.baseUrl}/api/common/upload`,
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log(JSON.parse(res.data).data.fullurl,'后台图片地址')
							resolve(JSON.parse(res.data).data.fullurl)
						},
						fail: (e) => {
							console.log(e, '失败')
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">

</style>